/*
 * vue主入口
 * @Author: ljb
 * @Date: 2018-11-14 09:49:26
 * @Last Modified by: kanglin
 * @Last Modified time: 2019-01-31 14:33:42
 */
<style lang="less" rel="stylesheet/less">

	@import '~src/assets/css/common.less';


	/*白色背景*/
	.white-bg {
		background-color: @main-background;
	}
	/*白色背景 END*/

	/*返回顶部的按钮*/
    .back-top-btn {
        position: fixed;
        right: 30*@rem-per-px;
        bottom: 40*@rem-per-px;
        width: 72*@rem-per-px;
        height: 72*@rem-per-px;
        border-radius: 50%;
        background-image: url(~src/assets/icon/default/arrow-up.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        z-index: 10;
    }
    /*返回顶部的按钮 END*/

</style>

<template>
	<div
		:class="getThemeName"
		class="app">
		<router-view/>

		<!-- 返回顶部按钮 -->
		<transition name="translate-fade">
			<div
				v-show="show_btn"
				class="back-top-btn"
				@click="easeScrollTo(0,0)"/>
		</transition>
	</div>
</template>
<script>

import { APP_DEBUG } from 'src/API_LIST';
import easeScroll from 'src/views/mixins/easeScroll';
import { mapGetters } from 'vuex';

import 'src/assets/theme/amazon/index';
import 'src/assets/theme/jd/index';
import 'src/assets/theme/default/index';

/**
 * @vue-data {Boolean} [show_btn=false] 控制返回顶部的按钮的显隐
 * @vue-methods {function} initListener 初始化事件监听
 * @vue-methods {function} btnShowControl 返回顶部按钮的显隐控制
 */
export default {
	mixins: [easeScroll],
	data() {
		return {
			show_btn: false,	// 控制返回顶部的按钮的显隐
		};
	},
	computed: {
		...mapGetters(['getThemeName']),
	},
	mounted() {
		this.initListener();
		if (!APP_DEBUG) {
			/* global panxVConsole */
			panxVConsole({ left: '0px', bottom: '0px' });
		}
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.btnShowControl);
	},
	methods: {
		/**
		 * 初始化事件监听
		 */
		initListener() {
			window.addEventListener('scroll', this.btnShowControl);
		},

		/**
		 * 返回顶部按钮的显隐控制
		 */
		btnShowControl() {
			const { scrollY } = window;

			const limited_y = 200;	// 200是显示按钮的临界值

			if (scrollY > limited_y) {
				this.show_btn = true;
			} else {
				this.show_btn = false;
			}
		},

	},
};
</script>
